<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            text-shadow: 10px 20px 30px red;
        }

        a:hover{
            text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;
            text-decoration: line-through red dashed;
        }

        #box{
            width: 200px;
            height: 200px;
            background: pink;
            text-align: right;
            text-align: left;
            text-align: center;
        }


        textarea{
            vertical-align: top;
            vertical-align: middle;
        }


        #box2{
            width: 200px;
            height: 200px;
            background: orange;
            /* text-align: center; */

            /* line-height: 200px; */

            display: table-cell;
            vertical-align: middle;
        }


        #box3{
            width: 100px;
            height: 18px;
            background: pink;


            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


    </style>
</head>
<body>
    <!--  
        1. 文本
            text-indent      首行缩进
            text-decoration  文本划线
                               none             隐藏划线
                               underline        下划线
                               overline         上划线
                               line-through     删除线, 贯穿线
            text-shadow       文本阴影
                                水平阴影: 正数向右, 负数向左
                                垂直阴影: 正数向下, 负数向上
                                模糊度:   值越大, 越模糊, 不能为负数
                                阴影颜色

            text-overflow     文本溢出 (条件: 文字必须在一行)
                                ellipsis    将溢出的隐藏内容用 ... 代替

                                配合以下属性:
                                    white-space: nowrap;    强制转为一行
                                    overflow: hidden        隐藏溢出的内容

            text-align         水平对齐方式 (支持文字, 图片, 对内)
                                left
                                center
                                right

            vertical-align    垂直对齐方式 (对外)
                                top
                                middle
                                bottom

                                veritcal-align 默认对外对齐

                                如何对内进行垂直居中对齐?
                                    display: table-cell;    将当前元素转为td单元格
                                    vertical-align: middle;
    -->

    <a href="">百度</a>

    <div id="box">
        黄焖鸡<br>
        <img src="./resource/1.jpg" width="50">
    </div>

    评论: <textarea name="" id="" cols="30" rows="10"></textarea>


    <div id="box2">
        白斩鸡<br>
        叫花鸡
    </div>

    
    <div id="box3">三杯鸡,口水鸡,老母鸡,辣子鸡,大公鸡</div>



</body>
</html>